<template>
    <!-- 主容器 -->
    <div class="comment-container">
      <!-- 主评论 -->
      <div class="main-comment">
        <van-image round size="40px" :src="mainData.avatar"/>
        <div class="content">
          <div class="meta">
            <span class="username">{{ mainData.user }}</span>
            <van-rate :model-value="mainData.rating" readonly size="14"/>
            <span class="time">{{ mainData.time }}</span>
          </div>
          <van-text-ellipsis :content="mainData.content" rows="3"/>
        </div>
      </div>
  
      <!-- 子评论列表（含虚拟滚动） -->
      <div class="sub-list" ref="scrollContainer">
        <div :style="{ height: totalHeight + 'px' }"></div>
        <div 
          v-for="item in visibleItems"
          :key="item.id"
          :style="{ transform: `translateY(${item.offset}px)` }"
        >
          <SubComment :data="item" @reply="handleReply"/>
        </div>
      </div>
  
      <!-- 回复输入框 -->
      <div class="reply-box">
        <van-field 
          v-model="replyText" 
          placeholder="输入回复内容"
          :formatter="(val) => `${val}`.slice(0, 200)"
        />
        <van-button type="primary" @click="submitReply">发送</van-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue';
  
  // 数据模型 ‌:ml-citation{ref="1,3" data="citationList"}
  const mainData = ref({
    id: 1,
    user: '美食探索者',
    avatar: 'https://xxx/avatar.jpg',
    rating: 4.5,
    content: '锅包肉酸甜适中，配送包装很用心...',
    time: '2小时前'
  });
  
  const subComments = ref(/* 初始化子评论数据 */);
  
  // 虚拟滚动逻辑 ‌:ml-citation{ref="3,6" data="citationList"}
  const itemHeight = 80;
  const scrollContainer = ref(null);
  const scrollTop = ref(0);
  const visibleCount = computed(() => 
    Math.ceil(scrollContainer.value?.clientHeight / itemHeight) + 2
  );
  
  const visibleItems = computed(() => {
    const start = Math.floor(scrollTop.value / itemHeight);
    return subComments.value.slice(start, start + visibleCount.value).map((item, i) => ({
      ...item,
      offset: (start + i) * itemHeight
    }));
  });
  
  const totalHeight = computed(() => subComments.value.length * itemHeight);
  
  // 交互处理 ‌:ml-citation{ref="7,8" data="citationList"}
  const replyText = ref('');
  const targetUser = ref(null);
  
  const handleReply = (user) => {
    targetUser.value = user;
    replyText.value = `@${user} `;
  };
  
  const submitReply = () => {
    subComments.value.push({
      id: Date.now(),
      user: '当前用户',
      avatar: 'https://xxx/user.jpg',
      content: replyText.value,
      time: '刚刚',
      parentId: mainData.value.id
    });
    replyText.value = '';
  };
  </script>
  
  <style lang="scss">
  .comment-container {
    padding: 12px;
    background: #fff;
  
    .main-comment {
      display: flex;
      gap: 12px;
      padding-bottom: 16px;
      border-bottom: 1px solid #eee;
  
      .meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        
        .time {
          color: #999;
          font-size: calc(12px + 0.2vw);  /* 响应式字号 ‌:ml-citation{ref="2,5" data="citationList"} */
          margin-left: auto;
        }
      }
    }
  
    .sub-list {
      height: 400px;
      overflow-y: auto;
      position: relative;
      margin: 12px 0;
  
      > div {
        position: absolute;
        width: 100%;
      }
    }
  
    .reply-box {
      display: flex;
      gap: 8px;
      padding: 8px;
      background: #f8f8f8;
      border-radius: 20px;
    }
  }
  
  /* 子评论组件 */
  .sub-comment {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin-left: 24px;
    background: #f8f8f8;
    border-radius: 8px;
    position: relative;
  
    &::before {
      content: '';
      position: absolute;
      left: -24px;
      top: 20px;
      width: 16px;
      height: 1px;
      background: #ddd;
    }
  }
  </style>
  